<template>
  <div class="components_table_details">
    <el-dialog width="500px" title="专业组信息"  :visible.sync="state" :show-close="true" :close-on-click-modal="false" class="maxheight" @open="open">
      <table class="el-table el-table--fit el-table--striped el-table--border el-table--enable-row-transition ">
        <tbody class="el-table__body">
        <tr>
          <td width="120px" class="is-required"><label>名称：</label></td>
          <td width="300px">{{form.name}}</td>
        </tr>
        <tr>
          <td><label>专业负责人：</label></td>
          <td>{{form.leaderName}}</td>
        </tr>
        <tr>
          <td><label>备注：</label></td>
          <td>{{form.remark}}</td>
        </tr>

        </tbody>
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="state = false"  size="mini">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 内容区域  结束 -->
  </div>
</template>

<script>
    export default {
        data() {
            return {
                 state: false,
                form: {
                    id: null,
                    name:null,
                    leaderId:null,
                  leaderName:null,
                  remark:null

                },
            }
        },
        created() {
        },
        mounted() {},
        computed:{
        },
        methods: {
          // 打开模态框
          showDialog(id){
            this.state = true;
            if (id) {
              this.form.id = id;
            }else{
              this.form.id = null;
            }
          },
          open(){
            this.$nextTick(()=>{

              if (this.form.id) {
                this.initData(()=>{
                });
              }
            });
          },
          //页面为编辑时初始化收项项目
          initData(callback){
            let vm = this;
            if (vm.form.id) {
              let url = api.professionGroup.detail.replace("{id}", vm.form.id);
              vm.axios.get(url).then((response) => {
                if (response.data.success) {
                  let result = response.data.data;
                  for (let attr in result) {
                    vm.form[attr] = result[attr];
                  }
                  callback();
                } else {
                  vm.$message.error(response.data.msg);
                }
              });
            }
          },

        },
        components: {}
    };
</script>
<style>
  .profession_group_eidt .el-dialog{
    width: 30%;
  }
  .profession_group_eidt .el-form-item{
    width: 100%;
    display: block;
  }
  .profession_group_eidt .el-form-item .el-form-item__label{
    width: 20%;
  }
</style>
